<template>
	<view>
		<view class="detail_header_title">
			单号-{{Detail_code}}
			
			<image  src="../../../static/changeIcon.png" @click="Switchstyles()" ></image>
			<image  src="../../../static/changeIcon.png" @tap="Switchstyles()" ></image>
		</view>
		<scroll-view scroll-x class="detail_body">
		 
		<!-- <view class="Detail_table" v-show="Switchstyle==1" style="background-color: #FFFFFF;"> 
						<scroll-view scroll-x style="width: 1650px;">
						<table border="1" class="Detail_table_list" >
						  <tr class="trtdpadd">
						    <th rowspan="2">序号</th>
							<th >已录数量</th>
							<th rowspan="2">商品名称</th>
							<th rowspan="2">编号</th>
							<th rowspan="2">规格</th>
							<th rowspan="2">单位</th>
							<th rowspan="2">仓库</th>
							<th rowspan="2">单价</th>
							<th rowspan="2">折扣</th>
							<th rowspan="2">税率</th>
						
							<th rowspan="2">未完成数</th>
							<th rowspan="2">未审核已引用数</th>
						
						  </tr>
						  <tr class="trtdpadd">
							<th nowrap="nowrap">总数量</th>
					
						  </tr>
						  <block v-for="(item,index) in Detail_info" :key="item.id">
						  <tr  class="trtdpadd">
						    <td rowspan="2"> {{index+1}}</td>
						    <td >{{item.newQty == ''||item.newQty==undefined?0:item.newQty}}</td>
							<td rowspan="2">{{item.GoodsName}}</td>
							<td rowspan="2">{{item.GoodsCode}}</td>
							<td rowspan="2">{{item.Spec}}</td>
							<td rowspan="2">{{item.UnitName}}</td>
							<td rowspan="2">{{item.stockName}}</td>
							<td rowspan="2">{{toFix(item.Price)}}</td>
							<td rowspan="2">{{item.Discount}}</td>
							<td rowspan="2">{{item.Tax}}</td>
							
							<td rowspan="2">{{item.UNQTY}}</td>
							<td rowspan="2">{{toFix(item.UNQD_QTY)}}</td>
						  </tr>
						  <tr >
						    <td >{{item.Qty == '' ?0:item.Qty}}</td>				
						    	
						  </tr>
						</block>
						</table>
						</scroll-view>
					</view> -->
					<!-- 列表形式 -->
					<scroll-view scroll-y style="overflow-y: scroll;height: 82%;padding-bottom: 60px;" v-show="Switchstyle==2">
						<!-- :class="['user_list',{'user_list_success':index == checklist}]" -->
					<view v-for="(item,index) in Detail_info" :class="['item_list',{'item_table':index == unfold}] "  :key="item.id">
						<p>商品名称：{{item.GoodsName}}</p>
						<p class="nums">数量：{{toFix(item.UNQTY)}}<span style="margin-left: 15px;">已录数：{{item.newQty == ''||item.newQty==undefined?0:item.newQty}}</span></p>
						<p>编号：{{item.GoodsCode}} <span style="margin-left: 15px;">规格：{{item.Spec}}</span></p>
						<p>单位：{{item.UnitName}}<span style="margin-left: 15px;">仓库：{{item.stockName}}</span></p>
						<p>批号：{{item.BatchNo}}</p>
						<p>单价：{{toFix(item.Price)}} <span style="margin-left: 15px;">折扣：{{item.Discount}}</span></p>
						<p>税率：{{item.Tax}}</p>
						<p>备注：{{item.Remark}}</p>
						<div class="radius" @tap="unfolds(index)">
							<!-- <div class="d3" v-if="index != unfold"></div>
							<div class="d4" v-else></div> -->
							<span v-if="index != unfold">展开</span>
							<span v-else>收起</span>
						</div>
					</view>
		<!-- 			<div class="aaaa">
						<div class="d3"></div>
						
					</div>
					<div class="aaaa">
						<div class="d4"></div>
						
					</div> -->
					
					
						</scroll-view>
		</scroll-view>
		<view class="list_content" v-show="Switchstyle==1">
		<view class="newlist" style="border-bottom: none;margin-bottom: -3px;margin-top: 7px;" >
			<view class="serial">序号</view>
			<view class="comparison">
				<view class="num_flex">已录数量</view>
				<view style="display: flex;flex: 1;justify-content: center;align-items: center;">总数量</view>
			</view>
			<view class="content" style="justify-content: center;align-items: center;line-height: 45px;font-size: 20px;border-bottom: none;">
				<view>商品信息</view>
				
			</view>
		</view>
		<!-- :style="{width:tdWidth[0]+'px'}" -->
		<view class="newlist" :class="['margin_top2',{'margin_top4':index != 0}] " v-for="(item,index) in Detail_info"   :key="index">
			
			<view class="serial">{{index+1}}</view>
			<view class="comparison">
				<view class="num_flex" style="font-size: 16px;">{{item.newQty == ''||item.newQty==undefined?0:item.newQty}}</view>
				<view style="display: flex;flex: 1;justify-content: center;align-items: center;font-size: 16px;">{{toFix(item.UNQTY)}}</view>
			</view>
			<view class="content">
				<view>商品名称：{{item.GoodsName}}</view>
				<view>编号：{{item.GoodsCode}}</view>
				<view>批号：{{item.BatchNo}}</view>
				<view class="padd_flex">
					<view>规格：{{item.Spec}}</view>
					<view class="flex">单位：{{item.UnitName}}</view>
				</view>
				<view>仓库：{{item.stockName}}</view>
				<view class="padd_flex">
					<view>单价：{{toFix(item.Price)}}</view>
					<view class="flex">折扣：{{item.Discount}}</view>
				</view>
				<view>税率：{{item.Tax}}</view>
				<view>备注：{{item.Remark}}</view>
			</view>
		</view>
		</view>
		<view class="Detail_footer">
			<view class="Detail_sum">总行数:{{Detail_length}} 总数量:{{Detail_sum}} 总金额:{{Detail_money}}</view>
			<view class="btnall">
				<!-- <view class="qiehuan" @tap="Switchstyles()">切换风格</view> -->
				<view class="btn_back" @tap="back">返回</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import * as GetApi from '@/syApis/syHttp/Http.js';
	export default {
		data() {
			return {
				Detail_info:[],//商品明细数据
				Detail_length:0,//商品明细总行数
				Detail_sum:0,//商品明细总数量
				Detail_money:0,//商品明细总金额
				Detail_code:'',//商品明细单号
				Switchstyle:1, //明细风格切换
				unfold:-1,// 展开
			}
		},
		onLoad:function(options){
			this.Detail_code = options.BillNo; //明细单号
			let  detailid= options.id
			console.log('新的页面打印')
			var order = JSON.parse(options.OrderGoodsList)
			console.log(order)
                  // 引用上传单据明细  order其他页面携带的参数，用于合并在明细
			// this.quote(detailid,order)//初始化查询明细
			if(options.isquote ==1){
				// 引用上传单据明细  order其他页面携带的参数，用于合并在明细
				this.quote(detailid,order)//初始化查询明细
			}else if(options.isquote ==2){
				this.selectd(detailid,order)
			}
		
		},
		methods: {
			// 查看明细
			quote:function(id,source){
				var that = this;
					let ClientID = uni.getStorageSync("UserCode");
					let CreateName = uni.getStorageSync("UserName");
					let Detailid =  id;
					let sourcedata = source;
					let data = {
						BillType:2,
						Database:'FastApp',
						BillID:Detailid,
					};
					GetApi.Check_Select_Bill_Detail(data,function(res){
						  if(res.state){
							  console.log(res)
							   if(res.data.ErrorMsg=="获取登录信息失败"){
								   GetApi.showTip("登录超时");
							   }else if(res.data.ErrorMsg!=""){
								   GetApi.showTip(res.data.ErrorMsg);
							   }else{
								   // Detail_length:0,//商品明细总行数
								   // Detail_sum:0,//商品明细总数量
								   // Detail_money:0,//商品明细总金额
								   console.log('这是长度')
								   console.log(res.data.ResultMsg.length)
								   
								   let money = 0;
								   let sum = 0;
								   var arrays = res.data.ResultMsg
								   for(let i in res.data.ResultMsg){
									   // console.log('这两个是长度')
									   // console.log(i)
									   // console.log(res.data.ResultMsg[i])
									   money += parseFloat(res.data.ResultMsg[i]['Amount'])//总金额
									   sum += parseFloat(res.data.ResultMsg[i]['Qty'])//总数量
								   }
								   that.Detail_length = res.data.ResultMsg.length;
								   that.Detail_sum = sum.toFixed(2);
								   that.Detail_money = money.toFixed(2);
								   // that.Detail_code = that.tableList[e]['BillNo']
								   // price.toFixed(2);
								   console.log('这是总金额')
								   console.log(money.toFixed(2))
								   console.log('这是总数量')
								   console.log(sum.toFixed(2))
								   
								   // 录入商品(数量)和已录入商品数合并
								   
								   that.combine(arrays,sourcedata)

							   }
						  }else{
							  GetApi.showTip("服务器错误!");
						  }
					});
				console.log(id)
			},
			// 查看明细
			selectd:function(id,source){
				var that = this;
					let ClientID = uni.getStorageSync("UserCode");
					let CreateName = uni.getStorageSync("UserName");
					let Detailid =  id;
					let sourcedata = source;
					let data = {
						BillType:3,
						Database:'FastApp',
						BillID:Detailid,
					};
					GetApi.Select_Bill_Detail(data,function(res){
						  if(res.state){
							  console.log(res)
							   if(res.data.ErrorMsg=="获取登录信息失败"){
								   GetApi.showTip("登录超时");
							   }else if(res.data.ErrorMsg!=""){
								   GetApi.showTip(res.data.ErrorMsg);
							   }else{
								   // Detail_length:0,//商品明细总行数
								   // Detail_sum:0,//商品明细总数量
								   // Detail_money:0,//商品明细总金额
								   console.log('这是长度')
								   console.log(res.data.ResultMsg.length)
								   
								   let money = 0;
								   let sum = 0;
								   var arrays = res.data.ResultMsg
								   for(let i in res.data.ResultMsg){
									   // console.log('这两个是长度')
									   // console.log(i)
									   // console.log(res.data.ResultMsg[i])
									   arrays[i]["UNQTY"] = arrays[i]["Qty"]
									   arrays[i]["UNQD_QTY"] = arrays[i]["Qty"]
									   money += parseFloat(res.data.ResultMsg[i]['Amount'])//总金额
									   sum += parseFloat(res.data.ResultMsg[i]['Qty'])//总数量
								   }
								   that.Detail_length = res.data.ResultMsg.length;
								   that.Detail_sum = sum.toFixed(2);
								   that.Detail_money = money.toFixed(2);
								   // that.Detail_code = that.tableList[e]['BillNo']
								   // price.toFixed(2);
								   console.log('这是总金额')
								   console.log(money.toFixed(2))
								   console.log('这是总数量')
								   console.log(sum.toFixed(2))
								   
								   // 录入商品(数量)和已录入商品数合并
								   
								  that.combine(arrays,sourcedata)
							   }
						  }else{
							  GetApi.showTip("服务器错误!");
						  }
					});
				console.log(id)
			},
			combine:function(arrays,sourcedata) {
				var that = this;
				for (var i in arrays) {
					arrays[i]["Qty"] = parseFloat(arrays[i]["Qty"]);
					arrays[i]["Price"] = parseFloat(arrays[i]["Price"]);
					arrays[i]["BatchNo"] = arrays[i]["BatchNo"] == undefined || arrays[i]["BatchNo"] == "" ? "" : arrays[i]["BatchNo"];
					arrays[i]["ProductionDate"] = arrays[i]["ProductionDate"] == undefined || arrays[i]["ProductionDate"] == "" ? "" :arrays[i]["ProductionDate"];
					arrays[i]["validityDate"] = arrays[i]["validityDate"] == undefined || arrays[i]["validityDate"] == "" ? "" :arrays[i]["validityDate"];
					for (var j in sourcedata) {
						// sourcedata[j]["IsGift"] = "0" ? false : true;
						arrays[i]['validityDate'] = that.timesubstr(arrays[i]['validityDate']);
						arrays[i]['ProductionDate'] = that.timesubstr(arrays[i]['ProductionDate']);
						sourcedata[j]["validityDate"] = that.timesubstr(sourcedata[j]["validityDate"]);
						sourcedata[j]["ProductionDate"] = that.timesubstr(sourcedata[j]["ProductionDate"]);
						sourcedata[j]["BatchNo"] = sourcedata[j]["BatchNo"] == undefined || sourcedata[j]["BatchNo"] == "" ? "" : sourcedata[j]["BatchNo"];
						console.log('-------这是对比HOME---------')
						console.log('这是商品ID', "源单" + arrays[i]["GoodsID"], "选中" + sourcedata[j]["GoodsID"])
						console.log('这是商品名称', "源单" + arrays[i]["GoodsName"], "选中" + sourcedata[j]["GoodsName"])
						console.log('这是单位', "源单" + arrays[i]["UnitID"], "选中" + sourcedata[j]["UnitID"])
						console.log('这是仓库', "源单" + arrays[i]["StoreID"], "选中" + sourcedata[j]["StoreID"])
						console.log('这是赠品', "源单" + arrays[i]["IsGift"], "选中" + sourcedata[j]["IsGift"])
						console.log('这是批号', "源单" + arrays[i]["BatchNo"], "选中" + sourcedata[j]["BatchNo"])
						console.log('这是单价', "源单" + arrays[i]["Price"], "选中" + sourcedata[j]["Price"])
						console.log('这是税率', "源单" + arrays[i]["Tax"], "选中" + sourcedata[j]["Tax"])
						console.log('这是折扣', "源单" + arrays[i]["Discount"], "选中" + sourcedata[j]["Discount"])
						console.log('这是生产日期', "源单" + arrays[i]["validityDate"], "选中" + sourcedata[j]["validityDate"])
						console.log('这是有效日期', "源单" + arrays[i]["ProductionDate"], "选中" + sourcedata[j]["ProductionDate"])
						console.log('-------这是对比END----------')
						if (arrays[i]["GoodsID"] == sourcedata[j]["GoodsID"] &&
							arrays[i]["GoodsName"] == sourcedata[j]["GoodsName"] &&
							arrays[i]["UnitID"] == sourcedata[j]["UnitID"] &&
							arrays[i]["StoreID"] == sourcedata[j]["StoreID"] &&
							arrays[i]["IsGift"] == sourcedata[j]["IsGift"] &&
							arrays[i]["BatchNo"] == sourcedata[j]["BatchNo"] &&
							parseFloat(arrays[i]['Price']) == parseFloat(sourcedata[j]["Price"]) &&
							parseFloat(arrays[i]['Tax']) == parseFloat(sourcedata[j]["Tax"]) &&
							parseFloat(arrays[i]['Discount']) == parseFloat(sourcedata[j]["Discount"]) &&
							arrays[i]['validityDate'] == sourcedata[j]["validityDate"] &&
							arrays[i]['ProductionDate'] == sourcedata[j]["ProductionDate"]
						){
							arrays[i]["newQty"] = sourcedata[j]["Qty"]
							// arrays[i]["Qty"] = parseFloat(arrays[i]["Qty"]);
						}
						// debugger;
					}
				}
				that.Detail_info = arrays;
				console.log('最终的结果')
				console.log(that.Detail_info)
			},
			// 日期截取
			timesubstr: function(e) {
				if (e == "" || typeof e == 'undefined') {
					return "";
				}
				return e.substring(0, 10)
			},
			//保留两位小数
			toFix:function(evt){
							 if(evt == ""|| evt==undefined){
								 return evt
							 }
							 evt = parseFloat(evt);
							 return evt.toFixed(2)//此处2为保留两位小数
			},
			//是否展开
			unfolds:function(e){
				if(this.unfold == e){
					this.unfold = -1
				}else{
					this.unfold = e
				}
			},
			//返回上一页
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			//切换风格
			Switchstyles:function(){
				this.Switchstyle = this.Switchstyle == 1?2:1
			},
		}
	}
</script>

<style lang="less">
	@import url("selectsource.css");
/* page {
		background-color: #EEEEEE;
		padding-bottom: 0upx;
		height: 100%;
	} */
	.newlist{
		display: flex;
		width: 100%;
		/* background-color: red; */
		/* height: 90px; */
		margin:  0 auto;
		border: 1px solid rgb(124, 170, 216);
		background-color: #fff;
	}
	
	.serial{
		display: flex;
		flex: 1;
		justify-content: center;
		align-items: center;
		border: 1px solid rgb(124, 170, 216);
		font-size: 16px;
	}
	.comparison{
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: center;
		border: 1px solid rgb(124, 170, 216);
	}
	/* .num_flex{
		display: flex;
		flex: 1;
	} */
	.content{
		display: flex;
		flex: 3;
		flex-direction: column;
		line-height: 18px;
		border: 1px solid rgb(124, 170, 216);
		padding: 2px 5px;
		font-size: 13px;
	}
	.padd_flex{
		display: flex;
		/* justify-content: flex-end; */
		/* flex: 1; */
	}
	.num_flex{
		border-bottom: 1.5px solid rgb(124, 170, 216);
		display: flex;
		flex: 1;
		width: 101%;
		justify-content: center;
		align-items: center;
	}
	.flex{
		/* display: flex; */
		/* flex: 1; */
		padding-left: 35px;
	}
	.margin_top2{
		margin-top: 2px;
	}
	.margin_top4{
		margin-top: 4px;
	}
	.list_content>.newlist:last-child{
		// padding-bottom: 50px;
		margin-bottom: 80px;
	}
</style>
